import styled from 'styled-components';
import React, { useState } from 'react';
import { List, Switch, Image } from 'antd-mobile';
import {
  UnorderedListOutline,
  PayCircleOutline,
  SetOutline,
} from 'antd-mobile-icons'
import HeaderImage from '@/static/image/person_bg.jpg'
import { Navigate, useNavigate } from 'react-router-dom';
export const Container = styled.div`
  & {
    height: 100%;
    .header {
      height: 200px;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url('${HeaderImage}'); 
      position: relative;
      .info {
        .iconfont {
          color: #f8f8f8;
        }
        .nick {
          color: var(--adm-color-primary);
        }
      }
    }
    .wave {
      height: 15px;
      overflow: hidden;
      position: relative;
      &::before, &::after {
        content: '';
        position: absolute;
        left: 50%;
        min-width: 300vw;
        min-height: 300vw;
        background-color: #47a6ca4f;
        opacity: .5;
        animation: rotate infinite linear;
      }    
      &::before {
        left: 70%;
        bottom: 1vh;
        border-radius: 45%;
        animation-duration: 10s;
      }
      &:after {
        left: 30%;
        bottom: 1.5vh;
        opacity: .7;
        border-radius: 47%;
        animation-duration: 10s;
      }
      @keyframes rotate {
        0% {
            transform: translate(-50%, 0) rotateZ(0deg);
        }
        50% {
            transform: translate(-50%, -2%) rotateZ(180deg);
        }
        100% {
            transform: translate(-50%, 0%) rotateZ(360deg);
        }
      }
    }
  }
`;

const Person = () => {
  const [person, setperson] = useState({});
  const navigate = useNavigate()
  return(
    <div>
      <Container>
        <div className="header flex-column-center">
          <div className="info flex-column-center" onClick={() => navigate('/login')}>
            <i className='iconfont icon-touxiang' style={{'fontSize': '40px',}}></i>
            <div className="nick mt-20 fw-600">{person.nick || '你好,请登录'}</div>
          </div>
        </div>
        <div className="wave"></div>
        <List header='基本选项'>
        <List.Item prefix={<UnorderedListOutline />} onClick={() => {}}>
          主题切换
        </List.Item>
        <List.Item prefix={<PayCircleOutline />} onClick={() => {}}>
          答题测试
        </List.Item>
        <List.Item prefix={<SetOutline />} onClick={() => {}}>
          设置
        </List.Item>
      </List>
      </Container>
    </div>
  )
}

export default Person